<template>
    <div class="withdrawal">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            充值记录
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="search-box">
                    <Row :gutter="16" style="min-width: 1024px">
                        <Col :span="6">
                            用户ID：
                            <Input v-model="userId" placeholder="用户ID/账号" style="width:auto"/>
                        </Col>
                        <Col :span="6">
                            金额范围：
                            <Select v-model="money" style="width:40%">
                                <Option v-for="item in moneyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Col>
                        <Col :span="6">
                            状态：
                            <Select v-model="state" style="width:40%">
                                <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Col>
                        <Col :span="6">
                            <div class="search-btn" @click="getList()">查询</div>
                        </Col>
                    </Row>
                </div>

                <div class="btn-box">
                    <Button type="primary" class="btn" :disabled="tableData.length === 0" @click="exportData()">导出数据</Button>
                </div>

                <div class="table-box">
                    <el-table
                        id="table"
                        ref="table"
                        :data="tableData"
                        size="mini"
                        style="width: 100%;min-width: 800px">
                        <!-- <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column> -->
                        <el-table-column
                            align="center"
                            prop="uid"
                            label="用户ID">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="user.name"
                            label="用户昵称">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="充值金额">
                            <template slot-scope="scope">
                                <p>￥{{scope.row.price}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="充值时间"
                            min-width="120">
                            <template slot-scope="scope">
                                <p>{{scope.row.create_time}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="充值方式">
                            <template slot-scope="scope">
                                <p>{{scope.row.bank ? scope.row.bank.bank : '- -'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="到账时间">
                            <template slot-scope="scope">
                                <p>{{scope.row.status === 1 ? scope.row.create_time : '- -'}}</p>
                            </template>
                        </el-table-column>
                        
                        <el-table-column
                            align="center"
                            label="充值状态">
                            <template slot-scope="scope">
                                <p>{{scope.row.status === '0' ? '未到账' : '已到账'}}</p>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
                            label="操作"
                            align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="look(scope.row.userId)">查看详情</el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                </div>

                <div class="page-box">
                    <Page :total="total" :page-size="pageSize" show-elevator show-total @on-change="pageChange" />
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
    import * as api from '@/api/api';
    import FileSaver from 'file-saver';
    import XLSX from 'xlsx';
    export default {
        data(){
            return {
                host: window.location.host,
                loading: this.$store.state,
                userId: '',
                userName: '',
                money: '',
                moneyList: [
                    {
                        label: '0-100元',
                        value: '0&100,between'
                    },
                    {
                        label: '100-200元',
                        value: '101&200,between'
                    },
                    {
                        label: '200-500元',
                        value: '201&500,between'
                    },
                    {
                        label: '500-1000元',
                        value: '501&1000,between'
                    },
                    {
                        label: '1000元以上',
                        value: '1001&100000000,between'
                    },
                    {
                        label: '全部',
                        value: '5'
                    }
                ],
                state: '',
                stateList: [
                    {
                        label: '未到账',
                        value: '0'
                    },
                    {
                        label: '已到账',
                        value: '1'
                    },
                    {
                        label: '全部',
                        value: '4'
                    }
                ],
                tableData: [],//表格数据
                total: 6,//数据总条数
                pageSize: 10,//每页显示条数
                current_page: 1,//当前页
            }
        },
        mounted(){
            this.getList();
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            pageChange(current_page) {
                this.current_page = current_page;
                this.getList();
            },
            getList() {
                let body = {
                    model: 'Bills',
                    offset: this.current_page - 1,
                    limit: this.pageSize,
                    with: {
                        0: 'user',
                        1: 'bank'
                    },
                    condition: {
                        type: 1
                    },
                    search: {
                        uid: this.userId
                    }
                };
                if(this.state !== '' && this.state !== '4') {
                    body.condition.status = this.state;
                };
                if(this.money !== '' && this.money !== '5') {
                    body.condition.price = this.money;
                };
                this.loading.isLoading = true;
                api.getDataList(body).then(res => {
                    this.loading.isLoading = false;
                    if(res.data.code === 200) {
                        this.tableData = res.data.data.data;
                        this.total = res.data.data.count * 1;
                    }else {
                        this.$Notice.error({
                            title: '错误',
                            desc: res.data.msg
                        });
                    }
                })
            },
            exportData() {
                /* generate workbook object from table */
                var wb = XLSX.utils.table_to_book(document.querySelector('#table'))
                /* get binary string as output */
                var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '充值记录.xlsx')
                } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
                return wbout
            }
        }  
    }
</script>


<style lang="less">
    @import '../../assets/styles/constant.less';
    .withdrawal{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        border-bottom: 1px solid #ddd;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .search-box{
                .search-btn{
                    width: 100px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    background-color: @greenColor;
                    border-radius: 4px;
                    color: #fff;
                    cursor: pointer;
                }
            }
            .btn-box{
                margin-top: 10px;
                display: flex;
                justify-content: flex-end;
                .btn{
                    background-color: #fff;
                    border: 1px solid #ddd;
                    color: #333;
                }
            }
            .table-box{
                margin-top: 10px;
                width: 100%;
                .el-table th{
                    background-color: #eee;
                    color: #333;
                    font-size: 14px;
                }
                .el-button--text{
                    color: @greenColor;
                }
            }
            .page-box{
                height: 50px;
                line-height: 50px;
                display: flex;
                justify-content: flex-end;
                background-color: #fff;
                padding: 0 20px;
                
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>